<!-- generate_password.html -->

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Password Generator</title>

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css">
</head>
<body class="bg-light">

    <div class="container mt-5">
        <h1 class="mb-4">Password Generator</h1>

        <!-- 添加到表单中 -->
        <form id="passwordForm" method="post" action="{% url 'generate_password' %}">
            {% csrf_token %}
            <div class="mb-3">
                <label for="websiteUrl" class="form-label">Enter Website URL:</label>
                <input value="{{ website_url }}" type="text" class="form-control" id="websiteUrl" name="website_url" required>
            </div>

            <!-- 新增用户输入表达式的输入框 -->
            <div class="mb-3">
                <label for="userExpression" class="form-label">User Expression (e.g., x * 3 - 2):</label>
                <input value="{{ user_expression }}" type="text" class="form-control" id="userExpression" name="user_expression">
            </div>

            <button type="submit" class="btn btn-primary">Generate Password</button>
        </form>


        {% if generated_password %}
        <div class="mt-4">
            <h2>Generated Password:</h2>
            <p class="lead" id="generatedPassword">{{ generated_password }}</p>
            <button class="btn btn-secondary" onclick="copyToClipboard()">Copy to Clipboard</button>
        </div>
        {% endif %}
    </div>

    <!-- Bootstrap JS (optional, if you need features like tooltips or modals) -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>

    <!-- Clipboard.js -->
    <script src="https://cdn.jsdelivr.net/npm/clipboard@2.0.10/dist/clipboard.min.js"></script>

    <script>
        function copyToClipboard() {
            var generatedPassword = document.getElementById('generatedPassword');
            var clipboard = new ClipboardJS('.btn-secondary', {
                text: function() {
                    return generatedPassword.innerText;
                }
            });

            clipboard.on('success', function(e) {
                alert('Password copied to clipboard!');
                e.clearSelection();
            });

            clipboard.on('error', function(e) {
                alert('Copy to clipboard failed. You can manually copy the password.');
            });
        }
    </script>
</body>
</html>
